{extend name="public/base" /} {block name="title"} New game {/block} {block name="style"}
<style>
    body {
        background-color: #f7f7fa;
    }
</style>
{/block} {block name="content"}
<div class="page payment">
    <div class="page__hd">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">per person:</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="amount" type="number" pattern="[0-9]*" placeholder="0">
                </div>
                <div class="weui-cell__ft">
                    <!--<label class="weui-label">$</label>-->
                </div>
            </div>
        </div>

        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">total people:</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="num" type="number" pattern="[0-9]*" placeholder="0">
                </div>
                <div class="weui-cell__ft">
                    <!--<label class="weui-label"></label>-->
                </div>
            </div>
        </div>
    </div>

    <div class="page__bd">
        <p>
            <span>$</span>
            <span class="show-amount">0.00</span>
        </p>

        <div class="weui-button-area">
            <a href="javascript:;" class="weui-btn weui-btn_primary start-btn">start</a>
        </div>
    </div>
</div>
{/block} {block name="script"}
<script>
    $(function () {
        $('[name=amount]').on('input', function () {
            $(this).val($(this).val().substring(0, 3));
            $('.show-amount').text(Number($(this).val()).toFixed(2));
        })

        $('[name=num]').on('input', function () {
            $(this).val($(this).val().substring(0, 2));
        })

        $('.start-btn').on('click', function () {
            var amount = Number($('[name=amount]').val());
            $.confirm({
                title: 'hint',
                text: 'you need to pay $' + amount + ' to start the game',
                onOK: function () {
                    //点击确认
                    $.ajax({
                        type: 'post',
                        url: "{:url('index/startHandler')}",
                        data: {
                            amount: amount,
                            num: $('[name=num]').val()
                        },
                        success: function (res) {
                            if (res.err) {
                                $.alert(res.msg, 'hint')
                            } else {
                                location.href = "{:url('index/index')}" +
                                    "/id/" + res.data
                            }
                        }

                    })
                },
                onCancel: function () {}
            });

        })
    })
</script>
{/block}